<template>
	<view class="refue-gold">
		<view class="w-center">
			<view class=" s-banner df df-flex-direction-column df-justify-content-alin">
				<view class="s-title">积分总额</view>
				<text class="s-score">{{userinfo.station_score}}</text>
				<text class="s-tips">根据加油金额按比例赠送积分（不同油站赠送积分比例不同），油站积分可以在对应油站兑换物品</text>
			</view>
			<view class="gold-title">
				油站积分
			</view>
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption">
				<view class="g-item df df-justify-content-between df-align-items" v-for="(item,index) in list"
					:key="index">
					<view class="g-item-l df df-align-items">
						<image src="@/static/mine/q@2x.png" mode=""></image>
						<view class="g-top">
							<view>{{item.station_name}}</view>
							<text class="g-time">{{item.updatetime}}</text>
						</view>
					</view>
					<view class="g-item-r">{{item.score}}</view>
				</view>
				<mescroll-empty v-if="list.length==0"></mescroll-empty>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import mApi from '@/api/mine.js';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				downOption: {
					use: true,
				},
				upOption: {
					use: true,
					// auto: false,
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10, // 每页数据的数量
						time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					},
					empty: {
						use: true, // 是否显示空布局
						icon: "https://www.mescroll.com/img/mescroll-empty.png", // 图标路径
						tip: '~ 暂无相关数据 ~', // 提示
						btnText: '去逛逛 >', // 按钮
						fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效 (transform会使fixed失效,最终会降级为absolute)
						top: "100rpx", // fixed定位的top值 (完整的单位值,如 "10%"; "100rpx")
						zIndex: 99 // fixed定位z-index值
					}
				},
				list: [],
				m: '',
				userinfo:{}
			}
		},
		onLoad(option) {
			this.m = option.m;
			
			mApi.getUserInfo().then(res=>{
				if(res.code == 1){
					this.userinfo = res.data;
				}
			});
			
			// #ifdef MP-ALIPAY
			// 支付宝小程序关闭页面下拉(默认开启下拉)
			my.setCanPullDown({ canPullDown:false });
			// #endif
		},
		methods: {
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				let _this = this;
				//联网加载数据
				mApi.getStationScoreList({
					page: page.num
				}).then(curPageData => {
					_this.mescroll.endBySize(curPageData.data.data, curPageData.data.total)
					//设置列表数据
					if (page.num == 1) _this.list = [];
					_this.list = _this.list.concat(curPageData.data.data);
			
				}).catch(() => {
					this.mescroll.endErr();
				})
			}
		}
	}
</script>

<style>
	page {
		/* height: 100%;
		background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%); */
	}
</style>
<style lang="scss" scoped>
	.refue-gold {
		.s-banner {
			margin-top: 10rpx;
			height: 290rpx;
			background: url('');
			background-size: 100% 100%;

			.s-title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, .8);
			}

			.s-score {
				font-size: 62rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #FFFFFF;
				padding-top: 10rpx;
				padding-bottom: 30rpx;
			}
			.s-tips{
				color: #ccc;
				font-size: x-small;
				display: inline-block;
				margin: 0rpx 13rpx 0rpx 47rpx;
			}

			.rule-btn {
				width: 190rpx;
				height: 56rpx;
				border: 1px solid #FFFEFF;
				border-radius: 60rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFEFF;
				text-align: center;
				line-height: 56rpx;
			}
		}

		.gold-title {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #323232;
			padding: 40rpx 0;
		}

		.g-item {
			width: 100%;
			padding-bottom: 26rpx;
			border-bottom: 1px solid #EEEEEE;
			margin-bottom: 30rpx;

			.g-item-l {
				image {
					width: 32rpx;
					height: 31rpx;
				}

				.g-top {
					padding-left: 28rpx;

					view {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #222222;
					}

					.g-time {
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}
			}

			.g-item-r {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #F12F63;
			}
		}
	}
</style>
